<template>
  <div class="login">
    <img src="/background.png" class="img" alt=""/>
    <div class="loginPart">
      <h2 style="font-family:Kaiti;color:white;font-size:30px">修改密码</h2>
      <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item has-feedback>
          <a-input-password v-model:value="user.oldPassword" placeholder="请输入原密码"/>
        </a-form-item>

        <a-form-item has-feedback :validate-status="type2" :help="message2">
          <a-input-password
              v-model:value="user.user_pwd"
              placeholder="请输入新密码"
              @change="checkPwd"
          />
        </a-form-item>
        <a-form-item has-feedback :validate-status="type3" :help="message3">
          <a-input-password
              v-model:value="user.user_pwd2"
              placeholder="请重复新密码"
              @change="checkPwd2"
          />
        </a-form-item>
      </a-form>
      <a-button :disabled="buttonStatus2" style="margin-left: 230px" @click="updatePwd">修改密码</a-button>
    </div>
  </div>
</template>


<script setup>
//////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken, removeLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
////////////////////////////////////////////
const user = reactive({
  user_pwd: "",
  user_pwd2: "",
  oldPassword: ""
});

const router = useRouter();

const message3 = ref("");

const type3 = ref("");

const type2 = ref("");

const message2 = ref("");
////////////////////////////////////////////////

const updatePwd = () => {
  /*
  if(!checkPwd())
  {
    return;
  }
  */
  post("/modify_password/modify_password", user).then(res => {
    message.success("修改密码成功,请重新登录");
    removeLocalToken();
    router.push({path: "/"});
    //tip.success("修改密码成功");
  });
};

const checkPwd = () => {
  if (user.user_pwd.length < 6) {
    message2.value = "密码不应少于6位";
    type2.value = "error";
    return false;
  } else {
    type2.value = "sucess";
    message2.value = "";
    if (user.user_pwd == user.user_pwd2) {
      type3.value = "success";
      message3.value = "";
      return true;
    } else {
      type3.value = "error";
      message3.value = "两次输入密码不一致";
      return false;
    }
  }
};
const checkPwd2 = () => {
  if (user.user_pwd2.length < 6) {
    message3.value = "密码不应少于6位";
    //message.error("密码不应少于6位");
    type3.value = "error";
    return false;
  } else if (user.user_pwd != user.user_pwd2) {
    message3.value = "两次输入密码不一致";
    type3.value = "error";
    return false;
  } else {
    type3.value = "success";
    message3.value = "";
    return true;
  }
};
</script>

<style>
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
  将border和padding划归到width范围内*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

.loginPart h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #000;
  text-align: center;
  /*文字居中*/
}

.loginPart .inputbox {
  position: relative;
}

.loginPart .inputElement {
  width: 100%;
  height: 56px;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 10px;
  border: none;
  /* border-bottom: 1px solid #fff; */
  outline: none;
  /*outline用于绘制元素周围的线
  outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;
  /*背景颜色为透明*/
}

.login {
  width: 100%;
  height: 100%;
}

.img {
  width: 100%;
  height: 100%;
}

.input {
  background-color: rgba(0, 0, 0, 0);
}
</style>
